
import React, { Component } from 'react'
import { NavLink } from 'react-router-dom'
import style from './Tabber.module.css'
import {
    AppOutline,
    MessageOutline,
    MessageFill,
    UnorderedListOutline,
    UserOutline,
} from 'antd-mobile-icons'
import { Badge, TabBar } from 'antd-mobile'
import { withRouter } from 'react-router-dom/cjs/react-router-dom.min'
class Tabbar extends Component {
    constructor(props) {
        super(props)
        this.tabsOnchange = this.tabsOnchange.bind(this)
    }
    tabsOnchange(key) {
        console.log(this.props)
        console.log('/' + this.props.location.pathname.split('/')[1])
        this.props.history.push(key)
        // switch (key){
        //     case '/cinemas':
        //         this.props.history.push('/cinemas')

        // }

        
    }
    render() {

        const tabs = [
            {
                key: '/films',
                title: '电影',
                icon: <AppOutline />,
                badge: Badge.dot,
            },
            {
                key: '/cinemas',
                title: '影院',
                icon: <UnorderedListOutline />,
                badge: '5',
            },
            {
                key: '/center',
                title: '我的',
                icon: (active) =>
                    active ? <MessageFill /> : <MessageOutline />,
                badge: '99+',
            }]
        return (
            <div className={style.tabbar}>
                {/* <ul>
                    <li>
                        * <a href="#/films"></a> *
                        <NavLink to="/films" activeClassName={style.kerwinactive}>电影</NavLink>
                    </li>
                    <li>
                        <NavLink to="/cinemas" activeClassName={style.kerwinactive}>影院</NavLink>
                    </li>
                    <li>
                        <NavLink to="/center" activeClassName={style.kerwinactive}>我的</NavLink>
                    </li>
                </ul> */}
                <TabBar onChange={
                    this.tabsOnchange
                }
                activeKey={'/' + this.props.location.pathname.split('/')[1]}

                >
                    {tabs.map(item => (
                        <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
                    ))}
                    
                    
                </TabBar>
            </div>
        )
    }
}
export default  withRouter(Tabbar)